<template>
  <div class="warpper-box">
    <a-form layout="inline" style="padding-left: 34px;">
      <a-form-item label="月份">
        <a-range-picker :mode="['month', 'month']" v-model="rangeDate" @panelChange="handleRangeChange1" @change="handleChange1" 
          format="YYYY-MM"></a-range-picker>
      </a-form-item>
      <a-form-item label="企业">
        <a-select v-model="staffParams.enterpriseIdList" placeholder="选择企业" style="min-width: 200px;" mode="multiple">
          <a-select-option v-for="item in enterpriseData" :key="item.enterpriseId" :name="item.name">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item>
        <a-button type='primary' @click="onSearch(1)">查询</a-button>
        <a-button type="warning" @click="exportTable">导出花名册</a-button>
      </a-form-item>
    </a-form>
    <!-- 残疾人花名册图表 -->
    <div style="padding: 20px 150px 0 150px;">
      <a-tabs type="card" v-model="staffRequestType" @change="overViewChange">
        <a-tab-pane key="1" tab="在职">
        </a-tab-pane>
        <a-tab-pane key="2" tab="入职">
        </a-tab-pane>
        <a-tab-pane key="3" tab="离职">
        </a-tab-pane>
      </a-tabs>
      <div id="staffChart" style="width: 100%;height: 600px;"></div>
    </div>
    <a-form layout="inline" style="padding-left: 34px;">
      <a-form-item label="月份">
        <a-range-picker :mode="['month', 'month']" v-model="rangeDate" @panelChange="handleRangeChange2" @change="handleChange2" 
          format="YYYY-MM"></a-range-picker>
      </a-form-item>
      <a-form-item label="企业">
        <a-select v-model="skillParams.enterpriseIdList" placeholder="选择企业" style="min-width: 200px;" mode="multiple">
          <a-select-option v-for="item in enterpriseData" :key="item.enterpriseId" :name="item.name">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item>
        <a-button type='primary' @click="onSearch(2)">查询</a-button>
      </a-form-item>
    </a-form>
    <!-- 技能培训图表 -->
    <div style="padding: 20px 150px 0 150px;">
      <div id="skillChart" style="width: 100%;height: 600px;"></div>
    </div>
    <a-form layout="inline" style="padding-left: 34px;">
      <a-form-item label="月份">
        <a-range-picker :mode="['month', 'month']" v-model="rangeDate" @panelChange="handleRangeChange3" @change="handleChange3" 
          format="YYYY-MM"></a-range-picker>
      </a-form-item>
      <a-form-item label="企业">
        <a-select v-model="condolenceParams.enterpriseIdList" placeholder="选择企业" style="min-width: 200px;" mode="multiple">
          <a-select-option v-for="item in enterpriseData" :key="item.enterpriseId" :name="item.name">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item>
        <a-button type='primary' @click="onSearch(3)">查询</a-button>
      </a-form-item>
    </a-form>
    <!-- 慰问关怀图表 -->
    <div style="padding: 20px 150px 0 150px;">
      <div id="condolenceChart" style="width: 100%;height: 600px;"></div>
    </div>
  </div>
</template>

<script>
import {
  overViewDisabledStaff,
  overViewDisabledSkill,
  overViewDisabledCondolence,
  exportDisabledStaff
} from "@/api/human/disabled"
import moment from 'moment';
import store from '@/store'
import { mapGetters, mapActions } from 'vuex'
export default {
  name: "compositeDetailEcharts",
  data() {
    return {
      
      rangeDate: [],

      statisticsInfo: {}, // 统计数据

      staffRequestType: '1', // 残疾人花名册类型
      staffParams: {
        actionDayStartTime: null,
        actionDayEndTime: null,
        enterpriseIdList: undefined
      },
      staffList: [], // 残疾人花名册列表
      skillParams: {
        actionDayStartTime: null,
        actionDayEndTime: null,
        enterpriseIdList: undefined
      },
      skillList: {}, // 技能培训列表
      condolenceParams: {
        actionDayStartTime: null,
        actionDayEndTime: null,
        enterpriseIdList: undefined
      },
      condolenceList: [], // 慰问关怀统计列表

      colorList: [], // 随机颜色组
      enterpriseData: [], // 企业列表
    };
  },
  activated() {
    this.getData();
  },
  methods: {
    moment,
    // 获取统计数据
    async getData() {
      this.getEnterpriseData();
      this.getColorList();
      this.getOverViewDisabledStaff();
      this.getOverViewDisabledSkill();
      this.getOverViewDisabledCondolence();
    },
    getColorList() {
      this.colorList = Array.from({ length: 300 }, () => {
        const r = Math.floor(Math.random() * 256);
        const g = Math.floor(Math.random() * 256);
        const b = Math.floor(Math.random() * 256);
        const toHex = (colorValue) => {
          let hex = colorValue.toString(16);
          return hex.length == 1 ? "0" + hex : hex;
        };
        return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
      })
    },
    // 日期选择
    handleRangeChange1(value, mode) {
      this.rangeDate = value;
      this.staffParams.actionDayStartTime = moment(value[0]).format("YYYY-MM");
      this.staffParams.actionDayEndTime = moment(value[1]).format("YYYY-MM");
    },
    handleChange1(value) {
      this.rangeDate = [];
      this.staffParams.actionDayStartTime = null;
      this.staffParams.actionDayEndTime = null;
    },
    handleRangeChange2(value, mode) {
      this.rangeDate = value;
      this.skillParams.actionDayStartTime = moment(value[0]).format("YYYY-MM");
      this.skillParams.actionDayEndTime = moment(value[1]).format("YYYY-MM");
    },
    handleChange2(value) {
      this.rangeDate = [];
      this.skillParams.actionDayStartTime = null;
      this.skillParams.actionDayEndTime = null;
    },
    handleRangeChange3(value, mode) {
      this.rangeDate = value;
      this.condolenceParams.actionDayStartTime = moment(value[0]).format("YYYY-MM");
      this.condolenceParams.actionDayEndTime = moment(value[1]).format("YYYY-MM");
    },
    handleChange3(value) {
      this.rangeDate = [];
      this.condolenceParams.actionDayStartTime = null;
      this.condolenceParams.actionDayEndTime = null;
    },
    // 导出功能
    exportTable() {
      let params = this.staffParams;
      exportDisabledStaff(params).then(res => {
        const blob = new Blob([res]);
        const fileName = '残疾人花名册.xlsx';
        const elink = document.createElement('a'); // 创建a标签
        elink.download = fileName;
        elink.style.display = 'none';
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click(); // 点击下载
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink); // 释放标签
      })
    },
    // 获取客户员工
    async getEnterpriseData() {
      this.enterpriseData = await store.dispatch('department/getAllEnterprise');
    },
    // 初始化残疾人花名册统计
    overViewChange() {
      this.getOverViewDisabledStaff();
    },
    async getOverViewDisabledStaff() {
      let params = this.staffParams;
      params.staffRequestType = this.staffRequestType;
      const { code, data } = await overViewDisabledStaff(params);
      if (code === '1') {
        this.staffList = data;
        this.initOverViewDisabledStaff();
      }
    },
    // 残疾人花名册
    initOverViewDisabledStaff() {
      const myChart = echarts.init(document.getElementById("staffChart"));
      let color = this.colorList;

      let xAxisData = this.staffList.x;
      let yAxisData = this.staffList.y;
      let seriesData = [];
      const hexToRgba = (hex, opacity) => {
        let rgbaColor = "";
        let reg = /^#[\da-f]{6}$/i;
        if (reg.test(hex)) {
          rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
            "0x" + hex.slice(3, 5)
          )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
        }
        return rgbaColor;
      }
      yAxisData.forEach((item, index) => {
        seriesData.push({
          name: item.name,
          type: "line",
          smooth: true,
          showSymbol: false,
          symbolSize: 8,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: color[index],
              shadowBlur: 3,
              shadowColor: hexToRgba(color[index], 0.5),
              shadowOffsetY: 8
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [{
                  offset: 0,
                  color: hexToRgba(color[index], 0.2)
                },
                {
                  offset: 1,
                  color: hexToRgba(color[index], 0)
                }
                ],
                false
              ),
              shadowColor: hexToRgba(color[index], 0.1),
              shadowBlur: 10
            }
          },
          data: item.data
        })
      })

      let option = {
        backgroundColor: "#fff",
        color: color,
        legend: {
          right: 40,
          top: 50,
          textStyle: {
            color: "#9FACBC"
          },
        },
        title: {
          text: `{a|残疾人花名册统计}`,
          textStyle: {
            rich: {
              a: {
                fontSize: 16,
                fontWeight: 600,
              },
            },
          },
          top: '0%',
          left: 'center',
        },
        tooltip: {
          trigger: "axis",
          position: function (point, params, dom, rect, size) {
            // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
            // 提示框位置
            var x = 0; // x坐标位置
            var y = 0; // y坐标位置

            // 当前鼠标位置
            var pointX = point[0];
            var pointY = point[1];

            // 外层div大小
            // var viewWidth = size.viewSize[0];
            // var viewHeight = size.viewSize[1];

            // 提示框大小
            var boxWidth = size.contentSize[0];
            var boxHeight = size.contentSize[1];

            // boxWidth > pointX 说明鼠标左边放不下提示框
            if (boxWidth > pointX) {
              x = 5;
            } else { // 左边放的下
              x = pointX;
            }

            // boxHeight > pointY 说明鼠标上边放不下提示框
            if (boxHeight > pointY) {
              y = 5;
            } else { // 上边放得下
              y = pointY - boxHeight;
            }

            return [x, y];
          },
          formatter: function (params) {
            let html = '';
            params.forEach(v => {
              html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>${v.seriesName}
                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
                人`;
            })
            return html
          },
          extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
          axisPointer: {
            type: 'shadow',
            shadowStyle: {
              color: '#ffffff',
              shadowColor: 'rgba(225,225,225,1)',
              shadowBlur: 5
            }
          }
        },
        grid: {
          top: 200,
          left: 5,
          right: 5,
          containLabel: true
        },
        dataZoom: [{
          "show": true,
          "height": 8,
          "xAxisIndex": [
            0
          ],
          bottom: 30,
          startValue: 0,
          endValue: 12,
          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
          handleSize: '180%',
          handleStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#fff',
            },
            {
              offset: 1,
              color: '#F0F5FA',
            },
            ]),
            borderColor: '#D1DCED'
          },
          textStyle: {
            color: "#333",
            fontSize: 14,
            zlevel: 10
          },
          borderColor: 'RGBA(221, 233, 242, 1)',
          backgroundColor: 'RGBA(221, 233, 242, 1)'
        }, {
          "type": "inside",
          "show": true,
          "height": 5,
        }],
        xAxis: [{
          type: "category",
          boundaryGap: true,
          axisLabel: {
            rotate: -15,
            formatter: '{value}',
            textStyle: {
              color: "#9FACBC"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#293755"
            }
          },
          data: xAxisData
        }],
        yAxis: [{
          type: "value",
          name: '单位：人',
          axisLabel: {
            textStyle: {
              color: "#9FACBC"
            }
          },
          nameTextStyle: {
            color: "#9FACBC",
            fontSize: 12,
            lineHeight: 40
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "rgba(0,0,0,.2)"
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        }],
        series: seriesData
      };
      myChart.setOption(option,true);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // 初始化技能培训
    async getOverViewDisabledSkill() {
      this.skillParams.staffRequestType = 1;
      const { code, data } = await overViewDisabledSkill(this.skillParams);
      if (code === '1') {
        this.skillList = data;
        this.initOverViewDisabledSkill();
      }
    },
    // 技能培训
    initOverViewDisabledSkill() {
      const myChart = echarts.init(document.getElementById("skillChart"));
      let color = this.colorList.slice(100, 199);

      let xAxisData = this.skillList.x;
      let yAxisData = this.skillList.y;
      let seriesData = [];
      const hexToRgba = (hex, opacity) => {
        let rgbaColor = "";
        let reg = /^#[\da-f]{6}$/i;
        if (reg.test(hex)) {
          rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
            "0x" + hex.slice(3, 5)
          )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
        }
        return rgbaColor;
      }
      yAxisData.forEach((item, index) => {
        seriesData.push({
          name: item.name,
          type: 'line',
          // smooth: true,
          symbol: 'circle',
          symbolSize: 10,
          itemStyle: {
            shadowColor: '#fff',
            shadowBlur: 10
          },
          label: {
            show: false,
            position: 'right',
            color: color[index]
          },
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: hexToRgba(color[index], 0.6)
              },
              {
                offset: 1,
                color: hexToRgba(color[index], 0)
              }
            ])
          },
          emphasis: {
            focus: 'series'
          },
          data: item.data
        })
      })

      let option = {
        backgroundColor: "#fff",
        color: color,
        legend: {
          itemWidth: 14,
          itemHeight: 14,
          top: 40,
          right: 30,
          textStyle: {
            fontSize: 14,
            color: '#737A85'
          }
        },
        title: {
          text: `{a|技能培训统计}`,
          textStyle: {
            rich: {
              a: {
                fontSize: 16,
                fontWeight: 600,
              },
            },
          },
          top: '0%',
          left: 'center',
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            let html = '';
            params.forEach(v => {
              
              html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>${v.seriesName}
                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
                次`;
            })
            return html
          },
        },
        grid: {
          top: 140,
          left: 5,
          right: 5,
          containLabel: true
        },
        dataZoom: [{
          "show": true,
          "height": 8,
          "xAxisIndex": [
            0
          ],
          bottom: 30,
          startValue: 0,
          endValue: 12,
          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
          handleSize: '180%',
          handleStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#fff',
            },
            {
              offset: 1,
              color: '#F0F5FA',
            },
            ]),
            borderColor: '#D1DCED'
          },
          textStyle: {
            color: "#333",
            fontSize: 14,
            zlevel: 10
          },
          borderColor: 'RGBA(221, 233, 242, 1)',
          backgroundColor: 'RGBA(221, 233, 242, 1)'
        }, {
          "type": "inside",
          "show": true,
          "height": 5,
        }],
        xAxis: [{
          type: "category",
          axisLine: {                     // 轴线设置
            show: false,                   // 显示轴线
          },
          axisLabel: {
            textStyle: {
              color: '#737A85',  //更改坐标轴文字颜色
              fontSize: 12     //更改坐标轴文字大小
            }
          },
          data: xAxisData
        }],
        yAxis: [{
          type: "value",
          name: '单位：次',
          nameTextStyle: {
            fontSize: 14
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#737A85',
              type: 'dashed'
            },
          },
          axisLabel: {
            textStyle: {
              color: '#737A85',  //更改坐标轴文字颜色
              fontSize: 12     //更改坐标轴文字大小
            }
          },
        }],
        series: seriesData
      };
      myChart.setOption(option,true);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // 初始化慰问关怀
    async getOverViewDisabledCondolence() {
      this.condolenceParams.staffRequestType = 1;
      const { code, data } = await overViewDisabledCondolence(this.condolenceParams);
      if (code === '1') {
        this.condolenceList = data;
        this.initOverViewDisabledCondolence();
      }
    },
    // 慰问关怀
    initOverViewDisabledCondolence() {
      const myChart = echarts.init(document.getElementById("condolenceChart"));
      let color = this.colorList.slice(200, 299);

      let xAxisData = this.condolenceList.x;
      let yAxisData = this.condolenceList.y;
      let seriesData = [];
      const hexToRgba = (hex, opacity) => {
        let rgbaColor = "";
        let reg = /^#[\da-f]{6}$/i;
        if (reg.test(hex)) {
          rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
            "0x" + hex.slice(3, 5)
          )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
        }
        return rgbaColor;
      }
      yAxisData.forEach((item, index) => {
        seriesData.push({
          name: item.name,
          type: 'line',
          symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: true,
          symbolSize: 0,
          smooth: true,
          lineStyle: {
            normal: {
              width: 2,
              color: color[index] // 线条颜色
            },
            borderColor: hexToRgba(color[index], .4)
          },
          itemStyle: {
            color: color[index],
            borderColor: '#646ace',
            borderWidth: 0
          },
          tooltip: {
            show: true
          },
          data: item.data
        })
      })

      let option = {
        backgroundColor: "#fff",
        color: color,
        legend: {
          top: '8%',
          // type: 'plain',
          textStyle: {
            color: '#737A85',
            fontSize: 12
          },
          //icon:'icon',
          // itemGap: 1,
          itemWidth: 10,
          itemHeight: 10,
        },
        title: {
          text: `{a|慰问关怀统计}`,
          textStyle: {
            rich: {
              a: {
                fontSize: 16,
                fontWeight: 600,
              },
            },
          },
          top: '0%',
          left: 'center',
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            let html = '';
            params.forEach(v => {
              html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>${v.seriesName}
                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
                次`;
            })
            return html
          },
        },
        grid: {
          top: 140,
          left: 5,
          right: 5,
          containLabel: true
        },
        dataZoom: [{
          "show": true,
          "height": 8,
          "xAxisIndex": [
            0
          ],
          bottom: 30,
          startValue: 0,
          endValue: 12,
          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
          handleSize: '180%',
          handleStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#fff',
            },
            {
              offset: 1,
              color: '#F0F5FA',
            },
            ]),
            borderColor: '#D1DCED'
          },
          textStyle: {
            color: "#333",
            fontSize: 14,
            zlevel: 10
          },
          borderColor: 'RGBA(221, 233, 242, 1)',
          backgroundColor: 'RGBA(221, 233, 242, 1)'
        }, {
          "type": "inside",
          "show": true,
          "height": 5,
        }],
        xAxis: [{
          type: "category",
          boundaryGap: false,
          axisLine: {
            //坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
              color: 'rgba(108, 166, 219, 1)'
            }
          },
          axisLabel: {
            //坐标轴刻度标签的相关设置
            textStyle: {
              color: '#737A85',
              padding: 5,
              fontSize: 14
            },
            formatter: function (data) {
              return data;
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#192a44'
            }
          },
          axisTick: {
            show: false
          },
          data: xAxisData
        }],
        yAxis: [{
          type: "value",
          name: '单位：次',
          nameTextStyle: {
            color: '#737A85',
            fontSize: 12
          },
          // min: 0,
          splitLine: {
            lineStyle: {
              color: 'rgba(108, 166, 219, 0.5)',
              type: 'dashed'
            }
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#233653'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#737A85',
              padding: 2
            },
            formatter: function (value) {
              if (value === 0) {
                return value;
              }
              return value;
            }
          },
          axisTick: {
            show: false
          }
        }],
        series: seriesData
      };
      myChart.setOption(option,true);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // 搜索
    onSearch(i) {
      if (i == 1) {
        this.getOverViewDisabledStaff();
      } else if (i == 2) {
        this.getOverViewDisabledSkill();
      } else {
        this.getOverViewDisabledCondolence();
      }
    },
    // 重置
    onReset() {
      this.getData();
    }
  }
};
</script>

<style lang="less" scoped></style>
